<template>
     <div id="navi" class="padding">
        <div :class="{selected:$route.name==='index'}"><router-link :to="{name: 'index'}">首页</router-link></div>
        <div :class="{selected:$route.name==='team'}"><router-link :to="{name: 'team'}">团队</router-link></div>
        <div :class="{selected:$route.name==='search'}"><router-link :to="{name: 'search'}">研究</router-link></div>
        <div :class="{selected:$route.name==='article'}"><router-link :to="{name: 'article'}">论文</router-link></div>
        <div :class="{selected:$route.name==='project'}"><router-link :to="{name: 'project'}">项目</router-link></div>
    </div>
</template>

<script>
export default({
  name: "navii"
})
</script>

<style>
#navi{
    height: 50px;
    background-color:#58B19F;
    display: flex;
    font-size:20px;
    color:#2C3A47;
}
#navi > div{
    width:120px;
    text-align: center;
    line-height:50px;
}
#navi .selected{
    background-color:white;
}
</style>